<template>
  <div class="klk">
     <header class="toubu">
          <div class="_toubu">
             <router-link tag="span" to="/Index" class="iconfont icon-zyojiantou"></router-link>
             <span class="iconfont icon-gouwuche"></span>
          </div>
          <section class="neirong">
              <div class="nei-left">
                  <img src="https://fuss10.elemecdn.com/5/6d/0cd73b38fbdf9abef398ef56c320bjpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/" alt="">
              </div>
              <div class="nei-right">
                  <h1>杨铭宇黄焖鸡（友谊医院店）</h1>
                  <div class="zi">
                    <p>蜂鸟专送 <span>/</span> </p>
                    <p>37分钟送达 <span>/</span> </p>
                    <p>配送费￥6</p>
                  </div>
                  <div class="guanggao">
                     <span>公告：</span>
                     <p>本店属于全国连锁快餐店</p>
                  </div>
                 
              </div>
          </section>
          <section class="xiamian">
              <p><span>首</span>新用户下单立减17元(不与其它活动同享)</p>
              <p>4个活动</p>
          </section>
       </header>
       <nav class="dao">
           <ul>
               <!-- <router-link v-for="(v,i) in fts" :key="i" tag="li" @click.native="switchFoot(v)" :to="v.path">
                <figcaption>{{v.name}}</figcaption>
               </router-link> -->
               <!-- <router-link tag="li" to="/pingjia">商品</router-link>
               <router-link tag="li" to="/pingjia">评价</router-link>
               <router-link tag="li" to="/caipu">店铺</router-link> -->
                <li>商品</li>
                <li>评价</li>
                <li>店铺</li>
           </ul>
       </nav>
        <!-- <router-view/> -->
       <section class="zhuhe">
           <ul>
               <li v-for='(v,i) in list' :key='i'>{{v.name}}</li>
           </ul>
            <div class="right-he">
            <div class="he-top">
                <p><span>热销</span>大家喜欢吃、才叫真好吃</p>
            </div>
            <div v-for='(a,b) in aa' :key='b' class="youhe">
                <div class="ctn">
                        <div class="you-left"><img :src="a.imgUrl"></div>
                        <div class="you-right">
                            <h1>{{a.ming}}</h1>
                            <p>{{a.wenzi}}</p>
                            <p class="zuti">{{a.xiao}}</p>
                            <p class="jiage"><span class="sp1">{{a.jia}}</span><span class="iconfont icon-wuuiconxiangjifangda sp2"></span></p>
                        </div>
                </div>
            </div>
           </div>
       </section>
      <footer class="ftr">
           <div class="ftr-top">
               满20减11，满35减13，满50减15，满88减30
           </div>
           <div class="ftr-wei">
               <div class="wei-left">
                  <div class="wei-he">
                      <div class="hyu">
                          <p class="iconfont icon-gouwuche"></p>
                      </div>
                  </div>
                  <div class="wei-tyy">
                      <p>￥0</p>
                      <span>配送费：￥5</span>
                  </div>
               </div>
               <div class="wei-right">
                   <p>￥40起送</p>
               </div>
           </div>
       </footer>
  </div>
</template>
<script>
    export default {
    name: 'app',
    data: function () {
        return{
            // tilie: 'wert',
            list: [
                {name:"必选品(必点口味汤底+餐盒)"},
                {name:"热销"},
                {name:"优惠"},
                {name:"大家好，我是觉姐"},
                {name:"觉姐必点招牌"},
                {name:"觉姐特色推荐"},
                {name:"觉姐重口味"},
                {name:"觉姐劲爆优惠"},
                {name:"觉姐的小鲜肉"},
                {name:"想减肥来选我吧"},
                {name:"吃豆腐你懂的我"},
                {name:"觉姐家的饮料区"},
                {name:"觉姐最爱"},
                {name:"觉姐小秘书"}               
            ],

             aa:[
                {
                    imgUrl:"https://fuss10.elemecdn.com/8/b6/77d96b9e06cc7f9c8b9fcfb96bc50jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
                    ming:"微辣黄焖鸡+米饭",
                    wenzi:"月售2160份 好评率97%",
                    xiao:"6.7折",
                    jia:"￥19.9"
                },
                {
                    imgUrl:"https://fuss10.elemecdn.com/a/fc/54c432557fe46502db86a45096911jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
                     ming:"微辣黄焖鸡+米饭",
                    wenzi:"月售2160份 好评率97%",
                    xiao:"6.7折",
                    jia:"￥19.9"
                },
                {
                    imgUrl:"https://fuss10.elemecdn.com/8/b6/77d96b9e06cc7f9c8b9fcfb96bc50jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
                      ming:"微辣黄焖鸡+米饭",
                    wenzi:"月售2160份 好评率97%",
                    xiao:"6.7折",
                    jia:"￥19.9"
                },
                {
                    imgUrl:"https://fuss10.elemecdn.com/8/b6/77d96b9e06cc7f9c8b9fcfb96bc50jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
                      ming:"微辣黄焖鸡+米饭",
                    wenzi:"月售2160份 好评率97%",
                    xiao:"6.7折",
                    jia:"￥19.9"
                },
                {
                    imgUrl:"https://fuss10.elemecdn.com/8/b6/77d96b9e06cc7f9c8b9fcfb96bc50jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
                      ming:"微辣黄焖鸡+米饭",
                    wenzi:"月售2160份 好评率97%",
                    xiao:"6.7折",
                    jia:"￥19.9"
                },
                {
                    imgUrl:"https://fuss10.elemecdn.com/8/b6/77d96b9e06cc7f9c8b9fcfb96bc50jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
                      ming:"微辣黄焖鸡+米饭",
                    wenzi:"月售2160份 好评率97%",
                    xiao:"6.7折",
                    jia:"￥19.9"
                },
                {
                    imgUrl:"https://fuss10.elemecdn.com/8/b6/77d96b9e06cc7f9c8b9fcfb96bc50jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
                      ming:"微辣黄焖鸡+米饭",
                    wenzi:"月售2160份 好评率97%",
                    xiao:"6.7折",
                    jia:"￥19.9"
                },
                {
                    imgUrl:"https://fuss10.elemecdn.com/8/b6/77d96b9e06cc7f9c8b9fcfb96bc50jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
                      ming:"微辣黄焖鸡+米饭",
                    wenzi:"月售2160份 好评率97%",
                    xiao:"6.7折",
                    jia:"￥19.9"
                }
             ],
            //  fts: [
            //      {
            //         name: '商品',
            //         path: '/xiangqing'
            //     },
            //     {
            //         name: '评价',
            //         path: '/pingjia'
            //     },
            //     {
            //         name: '店铺',
            //         path: '/aaa'
            //     }
            //  ]
           }
        }
        // methods: {
        //     switchFoot (v) {
        //     this.$emit('navTitle', v.name)
        //     }
        // },
        // created () {
        //     this.$emit('navTitle', this.list[0].name)
        // }
    }
</script>
<style scoped lang="less">
.px2rem(@name, @px) {
  @{name}: @px / 75 * 1rem;
}
 .klk{
    .toubu{
        width: 100%;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        background: Olive;
        font-family: "微软雅黑";
        ._toubu{
            width: 95%;
            .px2rem(height,80);
            display: flex;
            justify-content: space-between;
            align-items: center;
            span{
                .px2rem(font-size,60);
                color: #fff;
            }
        }
        .neirong{
            width: 100%;
            display: flex;
            .nei-left{
                width: 30%;
                .px2rem(height,180);
                display: flex;
                justify-content: center;
                align-items: center;
                img{
                    .px2rem(width,140);
                    .px2rem(height,140)
                }
            }
            .nei-right{
                width: 70%;
                .px2rem(height,180);
                h1{
                    .px2rem(font-size,40);
                    font-weight: bold;
                    color: #fff;
                }
                .zi{
                    width: 100%;
                    .px2rem(height,60);
                    display: flex;
                    p{
                        .px2rem(font-size,28);
                        color: #fff;
                        line-height: 1.8;
                    }
                }
                .guanggao{
                    width: 100%;
                    .px2rem(height,60);
                    display: flex;
                    .px2rem(font-size,28);
                    color: #fff;
                    span{
                        .px2rem(width,85);
                    }
                    p{
                        flex: 1;
                    }
                }
            }
        }
        .xiamian{
            width: 100%;
            .px2rem(height,70);
            display: flex;
            justify-content: space-around;
            p{
                .px2rem(font-size,29);
                color: #fff;
                line-height: 1.9;
                span{
                    background: #339900;
                }
            }
        }
    }
    .dao{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        border-bottom: 1px solid #ccc;
        background: #fff;
        position: sticky;
        top: 0;
        z-index: 100;
        ul{ 
            width: 70%;
            list-style: none;
            display: flex;
            justify-content: space-between;
            li{
                width: 15%;
                .px2rem(height,80);
                .px2rem(font-size,36);
                text-align: center;
                line-height: 2;
                font-weight: bold;               
            }
            li:first-child{
                color: #0033FF;
                border-bottom: 3px solid #0033FF;
            }
        }
        
    }
    .zhuhe{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        ul{
            width: 23%;
            background: #CCCCFF;
            position: sticky;
            top: 20px;
            .px2rem(padding-bottom,240);
            .px2rem(height,1120);
            li{
                width: 100%;
                .px2rem(height,146);
                .px2rem(font-size,32);
                display: flex;
                justify-content: center;
                align-items: center;
                border-bottom: 1px solid #555;
            }
            li:last-child{
                border-bottom: none;
            }
        }
        .right-he{
            width: 77%; 
            .px2rem(padding-bottom,170);
            .he-top{
                width: 100%;
            .px2rem(height,115);
                p{
                    .px2rem(font-size,34);
                    color: #555;
                    line-height: 2;
                    .px2rem(padding-left,20);
                    box-sizing: border-box;
                    span{
                        .px2rem(font-size,40);
                        font-weight: bold;
                        color: #000;
                    }
                }
            }      
            .youhe{
                width: 100%;
                .px2rem(padding-bottom,30);
                .ctn{
                    width: 100%;
                    display: flex;
                        .you-left{
                            width: 30%;
                            .px2rem(height,230);
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            img{
                                .px2rem(width,150);
                                .px2rem(height,160);
                            }
                        }
                        .you-right{
                            width: 70%;
                            .px2rem(height,230);
                            h1{
                                .px2rem(font-size,36);
                                font-weight: bold;
                            }
                            p{
                                line-height: 1.7;
                                .px2rem(font-size,32);
                                color: #555;
                            }
                            .zuti{
                                .px2rem(font-size,36);
                                color: #555;
                                line-height: 1.5;
                            }
                            .jiage{
                                display: flex;
                                .sp1{
                                    width: 70%;                  
                                    .px2rem(font-size,40);
                                    color: #CC0033;
                                    font-weight: bold;
                                    line-height: 2;
                                }
                                .sp2{
                                    flex: 1;
                                    .px2rem(font-size,50);
                                    color: #3333FF;
                                }
                            }
                        }
                }
            
            }
        }
    }
    .ftr{
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 300;
        .ftr-top{
            width: 100%;
            .px2rem(height,60);
            background: #FFCC99;
            display: flex;
            justify-content: center;
            align-items: center;
            .px2rem(font-size,30);
        }
        .ftr-wei{
            width: 100%;
            display: flex;
            .wei-left{
                width: 70%;
                .px2rem(height,140);
                background: #000;
                .wei-he{
                    width: 35%;
                    .px2rem(height,140);
                    justify-content: center;
                    display: flex;
                    position: relative;
                    top: 0;
                    .hyu{
                        .px2rem(width,120);
                        .px2rem(height,120);
                        border: 8px solid #161823;
                        border-radius: 50%;
                        background: #000000;
                        justify-content: center;
                        align-items: center;
                        display: flex;
                        position: absolute;
                        top: -21px;
                        p{
                        .px2rem(font-size,80);
                        color: #666666;
                        
                        }
                    }
                }
                .wei-tyy{
                    width: 65%;
                    .px2rem(height,140);
                    display: flex;
                    flex-direction: column;
                    position: relative;
                    .px2rem(top,-140);
                    left: 35%;
                    p{
                        .px2rem(font-size,42);
                        font-weight: bold;
                        color: #fff;
                        .px2rem(padding-top,35);
                    }
                    span{
                        .px2rem(font-size,32);
                        color: #fff;
                        .px2rem(padding-top,12); 
                    }
                }
            }
            .wei-right{
                width: 30%;
                .px2rem(height,140);
                display: flex;
                justify-content: center;
                align-items: center;
                background: #161823;
                p{
                    .px2rem(font-size,42);
                    font-weight: bold;
                    color: #fff;
                }
            }
        }
    }
    
 }
</style>
